/**
 * @Description:样式表
 * @author Huisir
 * @create 2020年7月27日 17:52:25
 */

$titleColor:#aaddff;
$contColor:#dcfffe;
$lightColor:#ffd200;
$borderColor:#225caa;
$bgColor:#081c4c;

body{
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	font-family: simhei;
	font-size: 20px;
	color: #fff;
	background-color: $bgColor;
	background-image: url(../img/bg.jpg);
	background-position:center top;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	overflow: hidden;
}
.container{
	width: 100vw;
	height: 33.75vw;
	padding: 2vw 3vw;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	position:relative;
	p{
		color:$contColor;
		font-size: .8vw;
		margin: .5vh;
		text-align: center;
		span.light{
			color: $lightColor;
			font-size: 1.2vw;
		}
		&.h{
			font-weight: 700;
			color: $titleColor;
			&.t{
				line-height:1.8vw;
				height: 1.8vw;
				margin: 0;
			}
		}
	}
	.title{
		writing-mode: vertical-rl;
		letter-spacing: .5vw;
	}
	select{
		border-color:$borderColor;
		background: transparent;
		color:#fff;
		option{
			background:$bgColor;
		}
	}
	.solid{
		border: .2vw solid $borderColor;
		box-shadow:inset 0 0 .5vw .1vw $borderColor;
		border-radius: .2vw;
		box-sizing: border-box;
		position: relative;
	}
	.dashed{
		border: .2vw dashed $borderColor;
		box-sizing: border-box;
		border-radius: .2vw;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.arrow{
		background-image: url(../img/jiantou_01.png);
		position: absolute;
		width: 4vw;
		height: 2.2vw;
		background-size:100%;
		background-repeat: no-repeat;
		z-index: 1;
	}
	&>.jt{
		position: absolute;
		width: calc(94% - 3vw);
		height: calc(85% - 2vw);
		border-top: 0;
		border-left: 0;
		right: 1.4vw;
		bottom: .8vw;
		z-index: -1;
		.line-1{
			position: absolute;
			width: 1vw;
			height: 1vw;
			border-top: .2vw dashed $borderColor;
			top: 0;
			right: 0;
		}
		.line-2{
			position: absolute;
			width: 2vw;
			height: 1vw;
			border-left: .2vw dashed $borderColor;
			bottom: 0;
			right: 8vw;
		}
		.line-3{
			position: absolute;
			width: 2vw;
			height: 2.5vw;
			border-left: .2vw dashed $borderColor;
			bottom: 0;
			left: 0;
		}
		img{
			position: absolute;
			width: 1.3vw;
			height:1vw;
			bottom:1.7vw;
			left:0;
			transform: translateX(calc(-50% + .1vw));
		}
	}
	.part-1{
		width: 10%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		&>*{
			width: 100%;
		}
		.box-t{
			height: 22%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.arrow{
				left: 50%;
				bottom:-2.5vw;
				transform: translateX(-50%) rotate(90deg);
			}
		}
		.box-b{
			height: 75%;
			.title{
				font-size: 1.6vw;
			}
			img{
				width: auto;
				height: 60%;
			}
		}
	}
	.part-2{
		width: 58%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		&>*{
			width: 100%;
		}
		.box-t{
			height: 67%;
			display: flex;
			justify-content: space-between;
			.item-l{
				width: 55%;
				height: 100%;
				.select{
					text-align: left;
					font-size:1vw;
					height: 3.2vw;
					line-height: 3.2vw;
					padding-left: 2vw;
					select{
						font-size:1vw;
						height:1.8vw;
						padding: 0 1vw;
						width: 7vw;
					}
				}
				.b{
					height: calc(100% - 4vw);
					width: 100%;
				}
			}
			.item-r{
				width: 45%;
				height: 100%;
				.item{
					width: 100%;
					height: 50%;
					position: relative;
				}
				#chart2::after{
					content: "采购金额";
					display: inline;
					font-size:.6vw;
					color:$contColor;
					position: absolute;
					top: 61%;
					left:45%;
					transform: translateX(-50%);
				}
			}
			.arrow{
				top:50%;
				&.l{
					left:-3vw;
					transform: translateY(-50%) rotate(180deg);
				}
				&.r{
					right: -3vw;
					transform: translateY(-50%);
				}
			}
		}
		.box-b{
			height: 30%;
			display: flex;
			justify-content: space-between;
			.item{
				width: 26.5%;
				height: 100%;
				&.l-1{
					width: 20.5%;
					display: flex;
					flex-direction: column;
					justify-content: center;
				}
			}
			.arrow{
				top:50%;
				&.l{
					left:-3vw;
					transform: translateY(-50%) rotate(180deg);
				}
				&.r{
					right: -3vw;
					transform: translateY(-50%);
				}
			}
		}
	}
	.part-3{
		width: 6%;
		height: 100%;
		.box{
			width: 100%;
			height: 100%;
			.title{
				font-size: 1.3vw;
			}
			img{
				width: 30%;
				height: auto;
			}
		}
	}
	.part-4{
		width: 19%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		&>*{
			width: 100%;
		}
		.box-t{
			height: 30%;
			.select{
				font-size:.5vw;
				position: absolute;
				top: 1.8vw;
				right:.5vw;
				select{
					font-size:.5vw;
					height: 1.2vw;
					padding: 0 .5vw;
					width: 5vw;
				}
			}
			.item{
				width: 100%;
				height: calc(100% - 1.8vw);
			}
			.arrow{
				top:50%;
				left:-3vw;
				transform: translateY(-50%) rotate(180deg);
			}
		}
		.box-b{
			height: 67%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.item{
				width: 100%;
				height: 50%;
				max-height: 10vw;
				.gysNum{
					display: flex;
					justify-content: space-around;
					height: calc(100% - 1.8vw);
					&>div{
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
						img{
							width:4vw;
							height: auto;
						}
						p.h{
							font-weight: 400;
						}
						span.light{
							font-size: 1.5vw;
						}
					}
				}
			}
			.arrow{
				top:50%;
				left:-3vw;
				transform: translateY(-50%) rotate(180deg);
			}
		}
	}
}